<template>
  <div class="component flex-row">
    <van-rate
      :value="value"
      :size="size"
      allow-half
      :color="color"
      :void-color="voidColor"
      :void-icon="voidIcon"
    />
    <div 
      v-if="text" 
      class="score"
      :style="{
        fontSize: fontSize,
        color: fontColor
      }"
      >
      {{value}} / 5.0
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    text: {
      type: Boolean,
      default: true
    },
    size: {
      default: 11
    },
    color: {
      type: String,
      default: "#ee0a24"
    },
    voidColor: {
      type: String,
      default: "#A9A7B8"
    },
    allowHalf: {
      type: Boolean,
      default: true
    },
    voidIcon: {
      type: String,
      default: "star"
    },
    fontSize: {
      type: String,
      default: "22rpx"
    },
    fontColor: {
      type: String,
      default: "#A9A7B8"
    }
  }
}
</script>

<style lang="less" scoped>
.component {
  .score {
    margin: 0 0 0 16rpx;
  }
}
</style>